<template>
<!-- 我的收货地址页面 -->
  <div class="my_address">
    <div class="address">
      <p class="distribution">配送地址</p>
      <a href="#/my/add_address" class="add_address">+添加地址</a>
    </div>
    <ul class="address_ul">
      <li class="address_li" v-for="(item,index) in listData" :key="index">
        <div class="box1">
          <div class="input">
            <van-checkbox v-model="checked"></van-checkbox>
          </div>
          <div class="person_box">
            <div class="person">
              <p class="person_p1">收货人:{{item.name}}</p>
              <p>联系电话:{{item.tel}}</p>
            </div>
            <p class="receipt_addres">收货地址:{{item.city+item.county + item.addressDetail}}</p>
          </div>
        </div>
        <div class="button">
          <van-icon name="delete-o" />
          <van-icon name="edit" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// import { Toast } from 'vant'
export default {
  data() {
    return {
      listData: [],
      checked: false
    }
  },
  created() {
    this.listData = JSON.parse(localStorage.getItem('addres') || '[]')
  },
  methods: {
  }
}
</script>

<style lang="scss">
  .my_address{
    background: #eee;
    width: 100%;
    height: 100%;
    padding-top: 1px;
    box-sizing: border-box;
    .address{
      width: 100%;
      height: 60px;
      background: white;
      display: flex;
      padding: 0px 15px;
      justify-content: space-between;
      box-sizing: border-box;
      font-size: 14px;
      .add_address{
        display: inline-block;
        line-height: 60px;
        color: skyblue;
        font-size: 14px;
      }
    }
  .address_li{
    width: 100%;
    margin-right: 10px;
    margin-top: 10px;
    .box1{
      background: white;
      width: 100%;
      display: flex;
      padding: 0px 20px;
      box-sizing: border-box;
      align-items: center;
      font-size: 14px;
      .input{
        margin-right: 10px;
      }
      .person_box{
        .person{
          display: flex;
          justify-content: space-between;
          .person_p1{
            margin-right: 15px;
          }
        }
        .receipt_addres{
          font-size: 12px;
        }
      }
    }
    .button{
      background: white;
      height: 38px;
      font-size: 24px;
      text-align:right;
      line-height: 38px;
      padding: 0px 30px;
      margin-top:1px ;
      .van-icon-edit{
        padding-left: 20px;
      }
    }
  }
}

</style>